<template>
    <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="50%"
            @close="close"
    >
        <el-form
                ref="userAddFormRef"
                :model="userAddForm"
                :rules="userAddFormRules"
                label-width="120px"
                status-icon
        >
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="userAddForm.userName" placeholder="请输入" :disabled="currentAction === 'edit'"/>
            </el-form-item>
            <el-form-item label="邮箱" prop="userEmail">
                <el-input v-model="userAddForm.userEmail" placeholder="请输入" :disabled="currentAction === 'edit'">
                    <template #append>.com</template>
                </el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="userAddForm.mobile" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="岗位" prop="job">
                <el-input v-model="userAddForm.job" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="状态" prop="state">
                <el-select v-model="userAddForm.state" placeholder="请选择" style="width: 100%;">

                    <el-option :label="item.label" :value="item.value" v-for="(item, index) in queryOptions" :key="'state'+index"/>
                </el-select>
            </el-form-item>
            <el-form-item label="系统角色" prop="roleList">
                <el-select
                        v-model="userAddForm.roleList"
                        multiple
                        placeholder="请选择"
                        style="width: 100%;"
                >
                    <el-option
                            v-for="item in roleOptions"
                            :key="item._id"
                            :label="item.roleName"
                            :value="item._id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="所属部门" prop="deptId">
                <el-cascader :options="deptOptions" :props="props1" clearable   v-model="userAddForm.deptId" style="width: 100%;"/>
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确认</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script setup name="UserDialog">
    const { proxy } = getCurrentInstance()
    let dialogVisible = ref(false)
    let dialogTitle = ref('新增')
    let currentAction = ref('add')
    const queryOptions = ref([
        {value: 1, label: '在职'},
        {value: 2, label: '离职'},
        {value: 3, label: '试用期'}
    ])
    const roleOptions = ref([])
    const deptOptions = ref([])
    const props1 = {
        checkStrictly: true,
        label: 'deptName',
        value: '_id'
    }
    const userAddForm = ref({
        state: 3
    })
    const userAddFormRules = ref({
        userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        userEmail: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
        deptId: [
            { required: true, message: '请选择部门', trigger: 'blur' },
        ],
    })

    const emit = defineEmits(['submit'])

    onMounted(() => {
        getRoles()
        getDept()
    })

    const handleClose = () => {
        console.log('before close')
        proxy.$refs.userAddFormRef.resetFields()
        close()

    }
    const addAction = () => {
        currentAction.value = 'add'
        dialogTitle.value = '新增'
        open()
    }
    const editAction = (item) => {
        currentAction.value = 'edit'
        dialogTitle.value = '编辑'
        open()
        nextTick(() => {
            Object.assign(userAddForm.value, item)
        })
    }

    const open = () => {
        dialogVisible.value = true
    }

    const close = () => {
        proxy.$refs.userAddFormRef.resetFields()
        dialogVisible.value = false
    }

    const getRoles = async () => {
        roleOptions.value = await proxy.$api.getAllRole()
    }

    const getDept = async () => {
        deptOptions.value = await proxy.$api.getAllDept()
    }

    const handleSubmit = () => {
        proxy.$refs.userAddFormRef.validate(async (valid) => {
            if (valid) {
                const params = toRaw(userAddForm.value)
                params.userEmail += '.com'
                params.action = currentAction.value
                await proxy.$api.operateUser(params)
                proxy.$message.success(`${dialogTitle.value}成功`)
                emit('submit')
                close()
            }
        })
    }

    defineExpose({
        addAction,
        editAction
    })
</script>

<style scoped>

</style>
